<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>我的托福人</title>
    <link th:href="@{/css/base.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/toefl.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/publicClass.js}" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="">

    <div class="publiclass">
        <form th:action="@{/article/newArticle}" method="post">
            <input type="submit" value="查询" style="display: none;"/>
        </form>
        <dl th:each="article,iterStat : ${page.list}" stat>
            <a th:href="@{/article/getArtInfo/{artNo}(artNo=${article.artNo})}" target="ifr">
                <dt><img width="400" height="200" th:src="@{/article/getArtImg/{artNo}(artNo=${article.artNo})}">
                </dt>
                <dd>
                    <div class=" tfr_classifyh3">
                        <h3 th:text="${article.artTitle}">托福口语5个技巧带你入门</h3>
                        <div><a href="###" class="imgA"><img class="img" th:text="${article.getUser().userName}"
                                                             th:src="@{/user/getAvatar/{userNo}(userNo=${article.userNo})}"/>
                        </a></div>
                    </div>
                    <div class="tfr_classifyText">
                        <p th:size="200" th:text="${article.artText}"></p>
                    </div>
                    <div class="tfr_classifyTime">
                        <span>所属分类:</span><a name="articleType" th:text="${article.artType}"
                                             th:href="@{/article/classArticle/{artType}(artType=${article.artType})}"
                                             target="ifr">听力</a>
                        <span>发布日期：</span><span th:text="${article.artDate}">2019-12-12</span>
                        <div class=" commDiv">
                            <span class="glyphicon glyphicon-heart" style="color: #D92A11;"></span> <span>100</span>
                            <span class="glyphicon glyphicon-user" style="color: #388BFF;"></span><span>20</span>
                        </div>
                    </div>
                </dd>
            </a>
        </dl>
    </div>
    <div class="pageList">
        <ul>
            <li> 共[[${page.total}]]条,
                <span th:if="${ ( page.pageNum - 1 ) * page.pageSize + 1 == page.total }">
                        当前显示第[[${page.total}]]条,
                        </span></li>
            <li>
                        <span th:if="${ ( page.pageNum - 1 ) * page.pageSize + 1 != page.total }">
                        当前显示[[${page.startRow}]]-[[${page.endRow}]]条,
                        </span>
            </li>
            <li>
                第[[${page.pageNum}]]/[[${page.pages}]]页
            </li>
            <li>
                <a href="#" th:if="${page.pageNum > 1}"><span class="linkspan" id="one">首页</span>&nbsp;</a>
            </li>
            <li>
                <a href="#" th:if="${page.pageNum > 1}"><span class="linkspan" id="two">上一页</span>&nbsp;</a>
            </li>
            <li>
                <a href="#" th:if="${page.pageNum < page.pages}"><span class="linkspan" id="three">下一页</span>&nbsp;</a>
            </li>
            <li>
                <a href="#" th:if="${page.pageNum != page.pages}"><span class="linkspan"
                                                                        id="four">末页</span>&nbsp;</a>
            </li>
            <li>
                到<input type="text" id="pageNo" size=4 style="text-align:right;" onkeypress="onlynumber();"/> 页
                <button class="linkspan" id="five" style="color:black;text-decoration:none;"> 跳 转</button>
            </li>
        </ul>
    </div>

</div>

<!--articleType 转换-->
<script>
    var articleType = document.getElementsByName("articleType");
    for (var i = 0; i < articleType.length; i++) {
        if (articleType[i].text === "1") {
            articleType[i].text = "听力"
        }
        if (articleType[i].text === "2") {
            articleType[i].text = "口语"
        }
        if (articleType[i].text === "3") {
            articleType[i].text = "阅读"
        }
        if (articleType[i].text === "4") {
            articleType[i].text = "写作"
        }
    }

</script>
<script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
<script th:inline="javascript">
    $(function () {
        //删除操作
        $(".delete").click(function () {
            var href = $(this).attr("href");
            if (confirm("确定要删除吗?")) {
                $("form:eq(0)").attr("action", href).submit();
                return false;
            }

        });

        $("#newArticle").click(function () {
            var href = $(this).attr("href");
            $(location).attr("href", href);
        });

        //分页操作
        $(".linkspan").click(function () {

            var pageNo = [[${page.pageNum}]];
            var totalPageNum = [[${page.pages}]];
            var re = /^[0-9]+.?[0-9]*$/;

            if (String($(this).attr("id")) == String("one"))
                pageNo = 1;

            if (String($(this).attr("id")) == String("two"))
                pageNo = pageNo - 1;

            if (String($(this).attr("id")) == String("three"))
                pageNo = pageNo + 1;

            if (String($(this).attr("id")) == String("four"))
                pageNo = totalPageNum;

            if (String($(this).attr("id")) == String("five")) {
                var num = $.trim($("#pageNo").val());

                if (!re.test(num)) {
                    alert("输入的不是数字!");
                    return;
                }
                pageNo = parseInt(num);
                if (pageNo < 1 || pageNo > totalPageNum) {
                    alert("页号超出范围，有效范围：[1-" + totalPageNum + "]!");
                    return;
                }

            }

            var act = "?pageNo=" + pageNo;
            $("form:eq(0)").attr("action", act).submit();
            return false;

        });
    });

</script>

</body>

</html>